<template>
  <div>
    keep-alive的使用
    <el-button type="primary" @click="componentName = A">切换到A组件</el-button>
    <el-button type="primary" @click="componentName = B">切换到B组件</el-button>
    <el-button type="primary" @click="componentName = C">切换C组件</el-button>
    <!-- 不缓存的组件 -->
    <!-- <keep-alive exclude="B">
      <component :is="componentName"></component>
    </keep-alive> -->
    <!--  设置最大缓存组件数量 -->
    <!-- <keep-alive  :max="2">
      <component :is="componentName"></component>
    </keep-alive>  -->
    <!-- 缓存A组件和B组件 -->
    <keep-alive  :include="['A', 'B']">
      <component :is="componentName"></component>
    </keep-alive> 

  </div>
</template>
<script setup>
import A from "./components/A.vue";
import B from "./components/B.vue";
import C from "./components/C.vue";
const componentName = ref(A);
</script>
